<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>Vue.directive 自定义指令</title>
</head>

<body>
    <h1>Vue.directive 自定义指令</h1>
    <hr>
    <div id="app">
        <p v-colorg="color">{{num}}</p>
        <button @click="add">Add</button>
    </div>
    <p>
        <button onclick="unbind()">解绑</button>
    </p>
    <script type="text/javascript">
        function unbind() {
            app.$destroy();
          }
        Vue.directive('colorg', {
            bind: function (el,binding) { //被绑定
                console.log('1 - bind');
                 el.style = "color:" + binding.value;
            },
            inserted: function (el,binding) { //绑定到节点
                console.log('2 - inserted');
            },
            update: function (el,binding) { //组件更新
                console.log('3 - update');
            },
            componentUpdated: function (el,binding) { //组件更新完成
                console.log('4 - componentUpdated');
            },
            unbind: function (el,binding) { //解绑
                console.log('5 - unbind');
            }
        })
        var app = new Vue({
            el: '#app',
            data: {
                num: '10',
                color: 'red'
            },
            methods: {
                add: function () {
                    return this.num++
                }
            }
        })
    </script>
</body>

</html>